<template>
	<view class="page address px12 py8 c00">
		
		<view class="r6 bgff px12 mt10">
			<view class="flex flexC pt14 borb pb10">
				<text class="w-5">收货人</text>
				<input v-model="username"  class="flex1" type="text" placeholder="请填写收货人的姓名" placeholder-class="cbd"/>
				<text v-show="false" @click="wechatAddress" class="bor00b fs12 r40 c00b px10 py4">微信导入</text>
			</view>
			<view class="flex flexC pt14 borb pb10">
				<text class="w-5">手机号码</text>
				<input v-model="mobile" type="text" class="flex1" placeholder="请填写手机号码" placeholder-class="cbd">
			</view>
			<view class="flex flexC pt4 borb pb2" @click="openLocation" >
				<text class="w-5">所在地区</text>
				<input disabled="disable" class="flex1" v-model="cityStr" type="text" placeholder="请选择所在地区" placeholder-class="cbd"/>
				<image class="location" src="/static/img/icon/location.png" mode="widthFix"></image>
			</view>
			<view class="flex flexC pt14 pb10">
				<text class="w-5">详细地址</text>
				<input type="text" class="flex1" v-model="address" placeholder="如街道、小区、门牌号等" placeholder-class="cbd">
			</view>
		</view>
		<!-- <view class="flex flexC flexB bgff py10 mt10 r6 pl12 pr4">
			<text class="w-6">设为默认地址</text>
			<switch checked color="#00B0DD" style="transform: scale(.8);" />
		</view> -->
		<button @click="add" class="bgff0 w212 r40 mt25 fs16 py14">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude:'',
				longitude:"",
				address:"",
				city:"",
				province:'',
				area:"",
				cityStr:"",
				username:"",
				mobile:""
			};
		},
		methods: {
			
			add(){
				if(this.username == "" || this.mobile == ""){
				  uni.showToast({title:"手机号或姓名不能为空",icon:'none'});
				  return;
				}
				if(this.city == ""){
				  uni.showToast({title:"请选择城市",icon:'none'});
				  return;
				}
				if(this.detail == ""){
				  uni.showToast({title:"请输入详细地址",icon:'none'});
				  return;
				}
				let param = {
					
					username:this.username,
					mobile:this.mobile,
					city:this.city,
					area:this.area,
					province:this.province,
					lat:this.latitude,
					lng:this.longitude,
					detail:this.address,
					
				}
				this.$api.addAddress(param).then(res => {
					
					if(res.code == 1){
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.showToast({title:res.msg,icon:'none'});
						
					}
					
				})
				
			},
			wechatAddress(){
				const that = this
				uni.chooseAddress({
				    success(res){
					  that.province = res.provinceName;
					  that.city = res.cityName;
					  that.province = res.provinceName;
					  that.area = res.countyName;
					  that.username = res.userName;
					  that.mobile = res.telNumber;
					  that.address = res.detailInfo;
					  that.cityStr = that.province +" "+ that.city+" "+that.area
					  
					  console.info(res)
				}
			 })
			},
			
			openLocation(){
				let that = this;
				uni.chooseLocation({
					 success: function (res) {
						 console.info(res)
						 that.latitude = res.latitude;
						 that.longitude = res.longitude;
						 
						 let regex = "(?<province>[^省]+省|.+自治区)(?<city>[^自治州]+自治州|[^市]+市|[^盟]+盟|[^地区]+地区|.+区划)(?<county>[^市]+市|[^县]+县|[^旗]+旗|.+区)?(?<town>[^区]+区|.+镇)?(?<village>.*)"
						 let newAddress = res.address.match(regex);
						 let group = newAddress.groups;
						 
						
						 that.province= group.province;
						 that.city= group.city;
						  if(group.county != null){
							 that.area= group.county;
						 }
						 if(group.town != null){
						 	that.area= group.county;
						 }
						 that.address = group.village;
						 that.cityStr = that.province +" "+ that.city+" "+that.area
					     console.log('位置名称：' + res.name);
					     console.log('详细地址：' + res.address);
					     console.log('纬度：' + res.latitude);
					     console.log('经度：' + res.longitude);  
					    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.address {
	.location {width: 80upx;}
	.w212 {width: 424upx;position: fixed;bottom: 40upx; left: calc(50% - 212upx);}
	.txt {width: 100%;height: 180upx;}
	button[disabled]{opacity: .4;background-color: #FF0000;color: #fff;}
}
</style>
